<template>
  <div class="challenge-details">
    <div class="challenge-details-main">
      <div class="task-rules">
        <h2>任务规则</h2>
        
        <!-- 全屏动画效果 -->
        <div v-if="showAnimation" class="challenge-accept-animation">
          <!-- 水墨效果背景 -->
          <div class="ink-effect"></div>
          
          <!-- 觉醒脉冲阶段 -->
          <div class="awakening-phase">
            <div class="glass-crack"></div>
            <div class="main-text">为地球而战！</div>
          </div>
          
          <!-- 文字轰炸阶段 -->
          <div class="text-bombardment">
            <!-- 核心警示层 -->
            <div class="core-messages">
              <div class="message message-1">地球只有一个！</div>
              <div class="message message-2">绿色出行，从我做起！</div>
              <div class="message message-3">低碳生活，永续未来！</div>
            </div>
            
            <!-- 环绕冲击层 -->
            <div class="surrounding-messages">
              <div class="warning-message warning-1">减少碳排放</div>
              <div class="warning-message warning-2">保护生态环境</div>
              <div class="warning-message warning-3">节能减排</div>
              <div class="warning-message warning-4">绿色生活方式</div>
              
              <!-- 添加更多远处的小文字，调整位置避免重叠 -->
              <div class="warning-message far-text" style="top: 15%; left: 15%; font-size: 0.9rem;">珍惜资源</div>
              <div class="warning-message far-text" style="bottom: 25%; right: 20%; font-size: 0.8rem;">共享单车</div>
              <div class="warning-message far-text" style="top: 75%; left: 35%; font-size: 0.7rem;">低碳出行</div>
              <div class="warning-message far-text" style="top: 10%; right: 15%; font-size: 0.75rem;">公共交通</div>
              <div class="warning-message far-text" style="top: 65%; right: 35%; font-size: 0.85rem;">环保先锋</div>
              <div class="warning-message far-text" style="top: 30%; left: 40%; font-size: 0.7rem;">可再生能源</div>
              <div class="warning-message far-text" style="bottom: 10%; left: 25%; font-size: 0.75rem;">垃圾分类</div>
              <div class="warning-message far-text" style="top: 45%; right: 40%; font-size: 0.7rem;">植树造林</div>
            </div>
            
            <!-- 动态背景层 -->
            <div class="dynamic-background">
              <div class="ash-timer"></div>
              <div class="earth-silhouette"></div>
            </div>
          </div>
          
          <!-- 聚焦升华阶段 -->
          <div class="focus-phase">
            <div class="crosshair"></div>
            <div class="final-message">守护地球，从现在开始！</div>
            <div class="chain-particles"></div>
          </div>
        </div>
        
        <!-- 新增: 任务规则列表 - 每天显示 -->
        <div v-if="taskRules && taskRules.length > 0" class="daily-rules-container" :class="{'task-all-completed': isTaskCompleted}">
          <div class="daily-rules-header">
            <h3>每日规则详情</h3>
            <p v-if="isTaskCompleted" class="rules-intro completion-message">
              <span class="completion-icon">🏆</span> 您已完成所有任务规则，感谢您的贡献！
            </p>
            <p v-else class="rules-intro">这个挑战包含7天的规则，请每天坚持完成！</p>
          </div>
          
          <div class="daily-rules-list">
            <div 
              v-for="(rule, index) in taskRules" 
              :key="index"
              class="daily-rule-card"
              :class="{'rule-completed': rule.isCompleted === 1 || isTaskCompleted}"
            >
              <!-- 天数标签 -->
              <div class="day-badge">Day {{ rule.ruleDay }}</div>
              
              <!-- 添加完成标记 -->
              <div v-if="rule.isCompleted === 1 || isTaskCompleted" class="completion-mark">
                <i class="checkmark">✓</i>
              </div>
              
              <h4 class="rule-title">{{ rule.ruleTitle }}</h4>
              <p class="rule-description">{{ rule.ruleDescription }}</p>
              
              <!-- 完成状态 -->
              <div class="rule-status">
                <span v-if="rule.isCompleted === 1 || isTaskCompleted" class="status-completed">
                  <i class="status-icon">✓</i> 已完成任务
                </span>
                <span v-else class="status-pending">
                  <i class="status-icon">⏱</i> 待完成
                </span>
              </div>
              
              <!-- 未完成时显示的鼓励文字 -->
              <p v-if="rule.isCompleted !== 1 && !isTaskCompleted" class="rule-action-hint">
                完成任务可获得积分奖励！
              </p>
            </div>
          </div>
        </div>
        
        <div class="task-list">
          <div 
            v-for="(task, index) in tasks" 
            :key="index"
            class="task-panel"
          >
            <div 
              class="task-header"
              @click="toggleTask(index)"
            >
              <span :class="['task-status', task.isCompleted ? 'completed' : '']">
                {{ task.isCompleted ? '✅' : '⏳' }}
              </span>
              <span>Day {{ task.day }}: {{ task.title }}</span>
              <span class="task-toggle">{{ activeTask === index ? '▲' : '▼' }}</span>
            </div>
            
            <div v-if="activeTask === index" class="task-content">
              <p>{{ task.description }}</p>
              <img 
                v-if="task.exampleImage" 
                :src="task.exampleImage" 
                :alt="`Day ${task.day} example`" 
                class="task-example-image" 
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChallengeDetails',
  props: {
    tasks: {
      type: Array,
      required: true,
      validator: function(val) {
        return val.every(task => 
          task.day && 
          task.title && 
          typeof task.isCompleted === 'boolean'
        );
      }
    },
    hasAcceptedTask: {
      type: Boolean,
      default: false
    },
    taskRules: {
      type: Array,
      default: () => []
    },
    isTaskCompleted: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeTask: 0,
      showAnimation: false,
      isPulsing: true,
      isClicked: false,
      currentMessage: 0
    };
  },
  methods: {
    toggleTask(index) {
      this.activeTask = this.activeTask === index ? null : index;
    },
    
    handleConnectDevice() {
      this.$emit('connect-device');
    },
    
    handleAcceptChallenge() {
      this.isPulsing = false;
      this.isClicked = true;
      
      setTimeout(() => {
        this.showAnimation = true;
        
        // 动画结束后重置状态
        setTimeout(() => {
          this.showAnimation = false;
          this.isClicked = false;
          this.isPulsing = true;
        }, 4500);
      }, 300);
      
      this.$emit('accept-challenge');
    }
  }
}
</script>

<style scoped>
/* 组件特定样式，可以从Challenge.css中导入或在这里定义 */
.task-panel {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.task-header {
  padding: 12px 15px;
  background-color: #f9f9f9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-status {
  margin-right: 10px;
}

.task-status.completed {
  color: #42b983;
}

.task-content {
  padding: 15px;
  border-top: 1px solid #eee;
}

.task-example-image {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}

.accept-challenge-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  perspective: 1000px;
}

.btn-accept-challenge {
  position: relative;
  border: none;
  font-weight: bold;
  padding: 15px 30px;
  font-size: 18px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(45deg, #FF5722, #FF9800);
  color: white;
  box-shadow: 0 5px 15px rgba(255, 87, 34, 0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  isolation: isolate;
}

.btn-inner-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
  background-size: 200% 200%;
  animation: flowGradient 3s ease infinite;
  z-index: -1;
}

.btn-text {
  position: relative;
  z-index: 2;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(to bottom, #FFFFFF, #FFE0B2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

/* 按钮呼吸效果 */
.btn-accept-challenge.pulsing {
  animation: buttonPulse 3s infinite;
}

.btn-accept-challenge.pulsing::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: linear-gradient(45deg, #FF5722, #FF9800, #FFC107);
  z-index: -2;
  opacity: 0;
  animation: borderGlow 3s ease-in-out infinite;
}

/* 点击效果 */
.btn-accept-challenge.clicked {
  transform: scale(0.9);
  box-shadow: 0 2px 5px rgba(255, 87, 34, 0.3);
  background: linear-gradient(45deg, #E64A19, #F57C00);
  animation: buttonPress 0.5s forwards;
}

.btn-accept-challenge.clicked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0));
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: goldBurst 0.5s forwards;
}

/* 全屏动画容器 */
.challenge-accept-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  background-color: rgba(15, 32, 23, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

/* 觉醒脉冲阶段 */
.awakening-phase {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glass-crack {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 0%, transparent 40%, rgba(120, 205, 178, 0.6) 50%, transparent 60%, transparent 100%);
  animation: crackEffect 0.3s ease-out forwards;
}

.main-text {
  font-size: 4rem;
  font-weight: 900;
  color: #4CAF50;
  text-shadow: 0 0 15px rgba(76, 175, 80, 0.7), 0 0 30px rgba(76, 175, 80, 0.3);
  animation: textPulse 0.3s ease-out forwards;
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  font-family: "SimSun", "宋体", serif;
  letter-spacing: 8px;
}

/* 文字轰炸阶段 */
.text-bombardment {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.core-messages {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.message {
  position: relative;
  font-size: 2.8rem;
  font-weight: 900;
  opacity: 0;
  font-family: "FangSong", "仿宋", serif;
  text-align: center;
  letter-spacing: 5px;
  margin: 20px 0;
  white-space: nowrap;
}

.message-1 {
  animation: messageEnter 0.8s ease-out forwards;
  color: #2E7D32;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(-60px) scale(0.8);
}

.message-2 {
  animation: messageEnter 0.8s ease-out forwards 0.8s;
  color: #388E3C;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(0) scale(0.8);
}

.message-3 {
  animation: messageEnter 0.8s ease-out forwards 1.6s;
  color: #43A047;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(60px) scale(0.8);
}

.surrounding-messages {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.warning-message {
  position: absolute;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0;
  font-family: "KaiTi", "楷体", serif;
  color: #66BB6A;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.warning-1 {
  bottom: 30%;
  left: 10%;
  transform: rotate(-15deg) translateZ(-100px) scale(0.8);
  animation: warningSlide 0.3s ease-out forwards 0.3s;
  font-size: 1.3rem;
  color: #81C784;
}

.warning-2 {
  top: 25%;
  right: 8%;
  transform: translateZ(-50px) scale(0.85);
  animation: warningExplode 0.3s ease-out forwards 0.6s;
  font-size: 1.5rem;
  color: #A5D6A7;
}

.warning-3 {
  top: 35%;
  left: 12%;
  transform: translateZ(-150px) scale(0.7);
  animation: warningFlash 0.3s ease-out forwards;
  animation-delay: 0.9s;
  font-size: 1.2rem;
  color: #C8E6C9;
}

.warning-4 {
  bottom: 35%;
  right: 12%;
  transform: translateZ(-200px) scale(0.65);
  animation: warningFlash 0.3s ease-out forwards;
  animation-delay: 1.2s;
  font-size: 1.1rem;
  color: #E8F5E9;
}

.far-text {
  position: absolute;
  opacity: 0;
  transform: translateZ(-400px) scale(0.5);
  color: rgba(76, 175, 80, 0.5);
  animation: farTextAppear 1s ease-out forwards;
  animation-delay: 1.3s;
}

/* 增加更多层次的文字 */
.text-bombardment::before {
  content: '绿色';
  position: absolute;
  top: 20%;
  left: 30%;
  font-size: 1rem;
  color: rgba(76, 175, 80, 0.4);
  transform: translateZ(-300px) scale(0.5);
  font-family: "SimSun", "宋体", serif;
  animation: farTextAppear 1s ease-out forwards 0.5s;
  opacity: 0;
}

.text-bombardment::after {
  content: '环保';
  position: absolute;
  bottom: 20%;
  right: 30%;
  font-size: 1rem;
  color: rgba(76, 175, 80, 0.4);
  transform: translateZ(-350px) scale(0.5);
  font-family: "SimSun", "宋体", serif;
  animation: farTextAppear 1s ease-out forwards 0.7s;
  opacity: 0;
}

.dynamic-background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ash-timer {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(120, 205, 178, 0.1) 0%, transparent 70%);
  animation: ashForm 2.5s ease-out forwards;
}

.earth-silhouette {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(76,175,80,0.08)" stroke-width="1" /></svg>') no-repeat center center;
  background-size: 300px;
  opacity: 0;
  animation: silhouetteFlash 0.2s ease-out forwards;
  animation-delay: 1.5s;
}

/* 增加水墨效果元素 */
.ink-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: inkSpread 3s ease-out forwards 0.2s;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(76,175,80,0.2)" stroke-width="0.5" /></svg>') no-repeat center center,
             url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(76,175,80,0.15)" stroke-width="0.3" /></svg>') no-repeat center center;
  background-size: 1000% 1000%, 800% 800%;
}

/* 聚焦升华阶段 */
.focus-phase {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: focusFadeIn 0.5s ease-out forwards 3.5s;
  transform-style: preserve-3d;
}

.crosshair {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #4CAF50;
  border-radius: 50%;
  animation: crosshairLock 1s ease-out forwards;
}

.crosshair::before,
.crosshair::after {
  content: '';
  position: absolute;
  background: #4CAF50;
}

.crosshair::before {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.crosshair::after {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.final-message {
  font-size: 3.5rem;
  font-weight: 900;
  color: #4CAF50;
  text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
  animation: flameText 1s ease-out forwards;
  opacity: 0;
  font-family: "SimHei", "黑体", sans-serif;
  letter-spacing: 4px;
  white-space: nowrap;
}

.chain-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(76, 175, 80, 0.5) 0%, transparent 70%);
  animation: chainBreak 1s ease-out forwards;
  opacity: 0;
}

/* 添加古风元素 */
.focus-phase::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="rgba(76,175,80,0.2)" stroke-width="1" stroke-dasharray="1 4" /></svg>') no-repeat center center;
  background-size: 100%;
  animation: rotateElement 10s linear infinite;
  opacity: 0.4;
}

/* 动画关键帧 */
@keyframes flowGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes buttonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes borderGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes buttonPress {
  0% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 87, 34, 0.4); }
  30% { transform: scale(0.9); box-shadow: 0 2px 5px rgba(255, 87, 34, 0.3); }
  100% { transform: scale(1.15); box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6); }
}

@keyframes goldBurst {
  0% { width: 0; height: 0; opacity: 0.8; }
  70% { width: 150%; height: 150%; opacity: 0.8; }
  100% { width: 200%; height: 200%; opacity: 0; }
}

@keyframes crackEffect {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes textPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes messageEnter {
  0% { 
    opacity: 0;
    transform-origin: center;
    transform: translateX(-30px) scale(0.8);
  }
  50% { 
    opacity: 1;
    transform: translateX(10px) scale(1.1);
  }
  75% { 
    transform: translateX(-5px) scale(1.05);
  }
  100% { 
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes warningSlide {
  0% { transform: translateX(-100px) rotate(-45deg) translateZ(-100px) scale(0.8); opacity: 0; }
  100% { transform: translateX(0) rotate(-45deg) translateZ(-100px) scale(0.8); opacity: 0.8; }
}

@keyframes warningExplode {
  0% { transform: scale(0) rotate(0deg) translateZ(-50px); opacity: 0; }
  50% { transform: scale(1.5) rotate(180deg) translateZ(-50px); opacity: 0.7; }
  100% { transform: scale(1) rotate(360deg) translateZ(-50px); opacity: 0.8; }
}

@keyframes warningFlash {
  0% { transform: scale(0.8) translateZ(-150px); opacity: 0; }
  50% { transform: scale(1.2) translateZ(-150px); opacity: 0.7; }
  100% { transform: scale(1) translateZ(-150px); opacity: 0.8; }
}

@keyframes ashForm {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes silhouetteFlash {
  0% { opacity: 0; }
  50% { opacity: 0.3; }
  100% { opacity: 0; }
}

@keyframes focusFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes crosshairLock {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes flameText {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes chainBreak {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes farTextAppear {
  0% { opacity: 0; transform: translateZ(-400px) scale(0.5); }
  100% { opacity: 0.6; transform: translateZ(-400px) scale(0.5); }
}

@keyframes inkSpread {
  0% { opacity: 0; background-size: 0% 0%, 0% 0%; }
  50% { opacity: 0.8; background-size: 500% 500%, 400% 400%; }
  100% { opacity: 0.3; background-size: 1000% 1000%, 800% 800%; }
}

@keyframes rotateElement {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 每日规则样式 */
.daily-rules-container {
  margin: 20px 0 30px;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.daily-rules-header {
  margin-bottom: 20px;
  text-align: center;
}

.daily-rules-header h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 8px;
}

.rules-intro {
  color: #666;
  font-size: 14px;
}

.daily-rules-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.daily-rule-card {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #4CAF50;
  transition: transform 0.3s, box-shadow 0.3s;
}

.daily-rule-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.day-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #4CAF50;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.rule-title {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  padding-right: 60px; /* 为day badge留出空间 */
}

.rule-description {
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.rule-completed {
  background-color: #f9fff9;
  border-left: 4px solid #81C784;
  opacity: 0.9;
}

.rule-completed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(129, 199, 132, 0.1) 25%, transparent 25%, transparent 50%, rgba(129, 199, 132, 0.1) 50%, rgba(129, 199, 132, 0.1) 75%, transparent 75%);
  background-size: 8px 8px;
  opacity: 0.3;
  border-radius: 0 8px 8px 0;
  pointer-events: none;
}

.rule-completed .rule-title {
  color: #388E3C;
  text-decoration: none;
}

.rule-completed .rule-description {
  color: #757575;
}

.completion-mark {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 12px;
}

.checkmark {
  font-weight: bold;
  font-style: normal;
}

.rule-action-hint {
  color: #666;
  font-size: 12px;
  margin-top: 10px;
  padding: 5px 0;
  border-top: 1px dashed #eee;
  font-style: italic;
}

.rule-status {
  margin-top: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.status-completed {
  color: #4CAF50;
  display: flex;
  align-items: center;
}

.status-pending {
  color: #FF9800;
  display: flex;
  align-items: center;
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 5px;
  font-style: normal;
}

.status-completed .status-icon {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-pending .status-icon {
  background-color: #FFF3E0;
  color: #FF9800;
}

.task-all-completed {
  position: relative;
  overflow: hidden;
  border: 1px solid #C8E6C9;
  background-color: #F1F8E9;
}

.task-all-completed::before {
  content: '挑战完成';
  position: absolute;
  top: 20px;
  right: -35px;
  background-color: #4CAF50;
  color: white;
  padding: 5px 40px;
  transform: rotate(45deg);
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.completion-message {
  color: #2E7D32 !important;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.completion-icon {
  margin-right: 8px;
  font-size: 18px;
  animation: rotateIcon 2s infinite linear;
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style> 